<script setup lang="ts">
import {Analysis, WebDiskFileVO} from "@/api/ai/webdiskfile";
import {Folder, Document, Download, View, Delete, VideoPlay} from "@element-plus/icons-vue";
import {formatDate} from "@/utils/formatTime";
import FilePreview from "./FilePreview.vue";
const props = defineProps({
  file: {
    type:Object as PropType<WebDiskFileVO>,
    required:true
  }
});
const useFlow=inject('useFlow')
const emits=defineEmits<{
  (e: 'deleteF', data: any): void;
  (e: 'export', emitData:any ): void;
  (e: 'analysis'): void;
}>()
const type=computed(()=>{
  return props.file?.mediaType?props.file.mediaType.split('/')[1]:props.file?.fileName?props.file?.fileName.split('.')[1]:'未知类型'
})
const state=reactive({
  previewVisible: false, // 控制预览弹窗的显示
  previewFile: null as WebDiskFileVO | null // 当前预览的文件
})
// 删除文件
const deleteFile=(id:any,type:string)=>{
   emits('deleteF', {id, type});
}

// 下载
async function download(url, filename) {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = blobUrl;
  a.download = filename; // 现在会使用你指定的文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  
  // 释放内存
  setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
}
// 下载文件
const downloadFile=(file:WebDiskFileVO)=>{
  if (file.url){
    download(file.url, file.fileName)
  }else{
    ElMessage.error("文件不存在")
  }
}
function viewFile(){
  state.previewVisible = true;
  state.previewFile = props.file;
}
function close() {
  state.previewVisible = false;
  // state.previewFile = null;
}
const analysisFile= ()=>{
   emits('analysis')
}
</script>

<template>
  <div class="file_div">
    <!-- <div class="icon">
      <el-icon :size="24"><Document/></el-icon>
    </div> -->
    <div class="title" @click="viewFile" >
      <!-- {{props.file.fileName}} -->
      <FilesCard :name="props.file.fileName" :maxWidth="400" style="width: 45%;min-width: 220px" />
    </div>
    <div class="state" v-if="useFlow === '1'" >
      {{Analysis[props.file.analysis]}}
    </div>
    <div @click.stop>
      <el-button-group>
        <el-button title="解析" text @click="analysisFile()" v-if="useFlow === '1'" :disabled="props.file.analysis !== 'not'" >
          <el-icon :size="15"><VideoPlay/></el-icon>
        </el-button>
        <el-button text @click="downloadFile(props.file)" >
          <el-icon :size="15"><Download/></el-icon>
        </el-button>
        <el-button type="danger" text @click="deleteFile(props.file.id,'file')" >
          <el-icon :size="15"><Delete/></el-icon>
        </el-button>
      </el-button-group>
    </div>
    <div class="type">
      
      <el-tooltip
        class="box-item"
        effect="light"
        :content="type"
        placement="top"
      >
        <div class="g-text-overflow">{{type}}</div>
      </el-tooltip>
    </div>
    <div class="day">
      {{props.file?.createTime?formatDate(props.file.createTime):''}}
    </div>
  </div>
  <!-- <Pdflookview ref="pdflookviewRef" :pdfUrl="state.previewFile?.url" /> -->
  <FilePreview @update="close" v-if="state.previewVisible"  :file-name="state.previewFile?.fileName" :file-url="state.previewFile?.url" :visible="state.previewVisible" />
</template>

<style scoped lang="scss">
.file_div{
  display: flex;
  flex-direction: row;
  padding: 10px;
  gap: 20px;
  line-height: 24px;
  align-items: center;
  font-weight: 300;
  &:hover{
    background-color: #f6f6f6;
  }
  &:hover .title{
    color: #059bef;
  }
  .title{
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    user-select: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .state{
    color: #818080;
    width: 80px;
  }
  .type{
    color: #818080;
    width: 80px;
  }
  .day{
    color: #818080;
    width: 150px;
  }
}
.g-text-overflow {
  text-align: center;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
